:root {
    --header-bg-color: #fff;
    --mian-bg-color: #fff;
    --footer-bg-color: rgba(12, 6, 6, 0.25);
    --max-width: 1300px;
    --scroll-width: 4px;
    /*margin-right: calc(0px - var(--scroll-width));*/
    /*padding-right: var(--scroll-width);*/
    overflow-x: hidden;
}

html::-webkit-scrollbar { /*滚动条整体部分，其中的属性有width,height,background,border等（就和一个块级元素一样）（位置1）*/
    width: var(--scroll-width);
    height: 10px;
}

html::-webkit-scrollbar-button { /*滚动条两端的按钮，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置2）*/
    /*background:#74D334;*/
    /*background:#74D334;*/
    /*height: 6px;*/
}

html::-webkit-scrollbar-track { /*外层轨道，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置3）*/
    /*background:#FF66D5;*/
}

html::-webkit-scrollbar-track-piece { /*内层轨道，滚动条中间部分（位置4）*/
    /*background:#FF66D5;*/
}

html::-webkit-scrollbar-thumb { /*滚动条里面可以拖动的那部分（位置5）*/
    background: #0000004f;;
    border-radius: 4px;
    transition: all 4s;
}

html.hidden-scroll::-webkit-scrollbar-thumb { /*滚动条里面可以拖动的那部分（位置5）*/
    background: rgba(0, 0, 0, 0);;
    border-radius: 4px;
    transition: all 4s;
}

html::-webkit-scrollbar-corner { /*边角（位置6）*/
    background: #82AFFF;
}

/*html::-webkit-scrollbar-resizer  {!*定义右下角拖动块的样式（位置7）*!
    background:#FF0BEE;
}*/

/*统一浏览器样式*/
body {
    font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
    margin: 0;
}

ul, ol {
    padding-left: 0;
    margin: 0;
    text-align: left;
}

ul li {
    list-style: none;
}

.inline-block {
    display: inline-block;
}

/*公共样式*/
a {
    color: #000;
    text-decoration: none;
}

a:hover {
    color: #FB4F4F;
}

.left {
    float: left;
}

.adabab {
    color: #adabab;
}

.br {
    border-radius: 5px;
}

.mouse:hover {
    cursor: pointer;
}

.right {
    float: right;
}

.text_center {
    text-align: center;
}

.text_right {
    text-align: right;
}

.clear:after {
    content: '';
    display: block;
    clear: both;
}

.pad {
    padding: 10px;
}

.mar {
    margin: 10px;
}

.pad-l-r {
    padding: 0 10px;
}

.relative {
    position: relative;
}

.white-card {
    background: #fff;
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.4);
    border-radius: 4px;
}

.middle-card {
    margin: 10px;
    border: 1px solid #5973ff;
    border-radius: 4px;
}

.max-width {
    max-width: var(--max-width);
    margin: 0 auto;
}

/*头部样式*/
.header {
    background: var(--header-bg-color);
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.4);
    position: fixed;
    left: 0;
    right: calc(0px - var(--scroll-width));
    top: -52px;
    transition: top .5s;
    z-index: 2;
}

.header.show {
    top: 0;
    transition: top .5s;
}

/*大标题*/
.main-title {
    font-size: 19px;
    margin: 10px;
    color: #000;
}

/*副标题*/
.sub-title, .sub-title-no-line {
    font-size: 16px;
    margin: 0 10px;
}

.sub-title {
    border-bottom: 1px solid red;
}

.aside-title {
    font-size: 16px;
    margin-left: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.44);
    margin-bottom: 0;
}

/*导航部分*/
.nav .pc {
    display: inline-block;
}

.nav .mobile {
    display: none;
}

.nav {
    font-size: 0;
}

.nav .pc, .nav .mobile {
    font-size: 16px;
}

.nav-btn {
    display: inline-block;
    line-height: 50px;
    font-size: 1rem;
    margin-left: 15px;
}

/*手机导航*/
/*菜单按钮*/
.menu-btn {
    width: 40px;
    height: 40px;
    position: relative;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.1);
    margin: 5px;
}

/*菜单按钮样式及动画*/
.menu-btn > i {
    position: absolute;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: black;
}

.menu-btn .menu-btn-top-line {
    top: 14px;
    transition: all .2s;
}

.menu-btn .menu-btn-middle-line {
    top: 20px;
    transition: all .2s;
}

.menu-btn .menu-btn-bottom-line {
    top: 26px;
    transition: all .2s;
}

.menu-btn.active .menu-btn-top-line {
    top: 18px;
    transform: rotateZ(45deg);
    transition: all .2s;
}

.menu-btn.active .menu-btn-middle-line {
    top: 18px;
    opacity: 0;
    transition: all .2s;
}

.menu-btn.active .menu-btn-bottom-line {
    top: 18px;
    transform: rotateZ(-45deg);
    transition: all .2s;
}

/*手机版菜单展开项内容*/
.menu-list.active {
    opacity: 1;
    transform: translateX(0);
    transition: all .5s ease-in-out;
}

.menu-list {
    /*border: 1px solid rgba(0, 0, 0, 0.4);*/
    opacity: 0;
    position: absolute;
    left: 0;
    right: 0;
    margin: 60px 10px 10px;
    padding: 10px;
    transform: translateX(-110%);
    transition: all .5s ease-in-out;
}

/*
.menu-list:after {
    content: '';
    display: block;
    background: #fff;
    width: 10px;
    height: 10px;
    position: absolute;
    top: -6px;
    right: 18px;
    border: 1px solid black;
    border-right: none;
    border-bottom: none;
    transform: rotateZ(45deg);
}
*/

.menu-list li {
    display: inline-block;
    width: 25%;
    text-align: center;
    box-sizing: border-box;
    padding: 5px;
}

/*PC二级菜单*/
.pc .nav-btn:hover .pc-sec-menu {
    visibility: visible;
}

.pc li.nav-btn {
    text-align: center;
    position: relative;
    margin: 0;
    padding: 0 4px;
}

.pc li.nav-btn a {
    margin: 0 auto;
    display: block;
}

.pc .nav-btn:last-child .pc-sec-menu {
    /*margin-right: 16px;*/
}

.pc-sec-menu {
    position: absolute;
    visibility: hidden;
    color: #000;
    left: 0;
    right: 0;
    margin: 0 -10px;
}

/*二级菜单箭头*/
/*.pc-sec-menu:after {
    content: '';
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-bottom-color: white;
    position: absolute;
    top: -14px;
    left: 24px;
}*/

/*电脑版二级菜单动画*/
.pc-sec-menu li {
    position: relative;
    line-height: 2rem;
    text-align: center;
}

.pc-sec-menu li:after, .pc-sec-menu li:before {
    position: absolute;
    content: '';
    border-top: 1px solid currentColor;
    border-left: 1px solid currentColor;
    width: 5px;
    height: 5px;
    top: 12px;
}

.pc-sec-menu li:hover {
    background: rgba(0, 0, 0, 0.18);
}

.pc-sec-menu li:hover:before {
    transform: rotateZ(135deg);
    left: 1px;
    opacity: 1;
    transition: all .5s;

}

.pc-sec-menu li:hover:after {
    transform: rotateZ(-45deg);
    right: 2px;
    opacity: 1;
    transition: all .5s;
}

.pc-sec-menu li:before {
    transform: rotateZ(135deg);
    left: -15px;
    opacity: 0;
    transition: all .5s;
}

.pc-sec-menu li:after {
    transform: rotateZ(-45deg);
    right: -15px;
    opacity: 0;
    transition: all .5s;
}

/*中间容器样式*/
.main-container {
    background: var(--mian-bg-color);
    min-height: calc(100vh - 90px);
    overflow: hidden;
}

.max-width.main-container {
    margin-top: 50px;
}

.main > div {
    margin-right: 300px;
}

.aside {
    width: 300px;
    margin-left: -300px;
}

/*底部样式*/

.footer {
    background: var(--footer-bg-color);
    margin-right: calc(0px - var(--scroll-width));
}

.footer .pc {
    height: 40px;
}

.footer .mobile {
    background: var(--header-bg-color);
    height: 40px;
    display: none;
    box-shadow: 0 0 2px 1px #00000042;
    position: fixed;
    left: 0;
    right: calc(0px - var(--scroll-width));
    bottom: -40px;
    transition: bottom .5s;
}

.footer .mobile.show {
    bottom: 0;
    transition: bottom .5s;
}

.footer .pc {
    text-align: right;
    line-height: 40px;
}

.main {
    width: 100%;
}

/*媒体查询隐藏侧边栏*/
@media screen and (max-width: 1100px) {
    .main > div {
        margin-right: 0;
    }

    .aside {
        display: none;
    }
}

/*手机电脑导航栏,footer切换*/
@media screen and (max-width: 650px) {
    .nav .pc {
        display: none;
    }

    .nav .mobile {
        display: inline-block;
    }

    .footer .pc {
        display: none;
    }

    .footer .mobile {
        display: block;
    }

    .main-container {
        min-height: calc(100vh - 50px);
    }

    .max-width.main-container {
        margin-bottom: 50px;
    }
}

/*卡片的响应式*/
.col-card-little-auto,
.col-card-little-full-auto,
.col-card-middle-auto {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    vertical-align: top;
}

@media screen and (min-width: 550px) {
    .col-card-little-auto,
    .col-card-little-full-auto {
        width: 50%;
    }

    .tree ul {
        padding-left: 50px;
    }
}

@media screen and (min-width: 650px) {
    .col-card-little-auto {
        /*width: 100%;*/
    }

    .col-card-middle-auto {
        width: 50%;
    }
}

@media screen and (min-width: 900px) {
    .col-card-little-auto,
    .col-card-little-full-auto {
        width: 50%;
    }
}

@media screen and (min-width: 900px) {
    .col-card-little-auto,
    .col-card-little-full-auto {
        width: 33.33333333%;
    }

}

@media screen and (min-width: 1100px) {
    .col-card-little-full-auto {
        width: 25%;
    }
}

/*首页侧边栏*/
.aside-list li:before {
    content: "\00BB \0020";
}

.aside-list.limit-height {
    overflow: hidden;
    max-height: 50px;
}

.aside-list.limit-height.active {
    max-height: 500px;
    transition: max-height 1s;
}

/*
.aside-list li {
    list-style: circle;
    margin: 5px 0 5px 20px;
    text-align: justify;
    font-size: 0;
}

.aside-list li > span {
    font-size: 1rem;
}

.aside-list li:after {
    content: '';
    display: inline-table;
    width: 100%;
}*/

/*组件化，card标签样式*/
.main-card-effect, .card-style1-effect, .card-style2-effect {
    background: #df4e4e;
    width: 100%;
    height: 200px;
    position: relative;
    overflow: hidden;
    color: #fff;
}

.main-card-effect a {
    color: currentColor;
}

/*右上角内容*/
.main-card-effect .card-count {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px;
    z-index: 1;
}

/*背景动画*/
.main-card-effect div.card-bg-container {
    transition: transform .4s;
    overflow: hidden;
}

.main-card-effect .card-bg-container .card-bg-img {
    transition: all .4s;
    filter: brightness(100%); /*解决filter对于层级的影响*/
    left: -10px;
    right: -10px;
    bottom: -10px;
}

.card-content,
.card-bg-container,
.card-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.main-card-effect:hover .card-bg-container {
    transform: translateY(-60px);
    /*brightness(0.8) ;*/
    transition: all .4s;
}

.main-card-effect:hover .card-bg-container .card-bg-img {
    filter: blur(2px);
    /*brightness(0.8) ;*/
    transition: all .4s;
}

/*文字部分动画*/
.main-card-effect .card-content-title, .main-card-effect ul.card-content-category {
    position: absolute;
    bottom: 0;
    margin: 0;
    padding: 15px 30px;
    transition: all .35s;
}

.main-card-effect .card-content-detail {
    position: absolute;
    bottom: 0;
    transform: translateY(60px);
    box-sizing: border-box;
    opacity: 0;
    padding: 3px 30px;
    height: 60px;
    transition: all .35s;
}

.main-card-effect:hover .card-content-title {
    transform: translateY(-80px);
    transition: all .35s;
}

.main-card-effect:hover .card-content-detail {
    transform: translateY(0);
    opacity: 1;
    transition: all .35s;
}

/*副标题、分类样式*/
.main-card-effect ul.card-content-category {
    opacity: 0.1;
    white-space: nowrap;
    left: 0;
    right: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main-card-effect:hover ul.card-content-category {
    transform: translateY(-55px);
    opacity: 1;
    transition: all .35s;
}

.main-card-effect ul.card-content-category li {
    display: inline-block;
    margin-right: 5px;
    color: #e34a84;
}

/*展示card部分css*/
.card-show-list {
    /*background: aqua;*/
    overflow: hidden;
    padding: 10px;
    min-height: 150px;
    border-radius: 5px;
}

.card-show-list .show-title {
    text-align: center;
    margin: 0 auto 10px;
    font-size: 1rem;
}

.card-show-list .show-list li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 5px 0;
    position: relative;
    text-align: center;
}

.card-show-list .show-list li:before {
    content: '\00BB \0020';
}

/*tree的css*/
.tree ul.mon-list, .tree ul.date-list {
    padding-left: 30px;
}

.tree ul li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tree {
    margin: 20px auto;
    max-width: 500px;
}

/*//////////////////////////////////////////*/

/*文章统计信息部分css*/
.articleStatistics {
    max-width: 700px;
    margin: 0 auto;
}

.articleStatistics fieldset {
    border-color: #eee;

}

@media screen and (max-width: 550px) {
    .articleStatistics .text-description li {
        display: inline-block;
        width: 25%;
        box-sizing: border-box;
        text-align: center;
    }

    .articleStatistics .chart {
        display: none;
    }
}

@media screen and (min-width: 550px) {
    .articleStatistics .text-description {
        width: 100px;
        float: left;
        /*background: red;*/
    }

    .chart {
        background: #e34a84;
        margin-left: 100px;
        height: 100px;
    }
}

/*/////////////////////////*/
/*分页样式*/
.pagination {
    text-align: center;
    user-select: none;
    font-weight: bold;
}

.pagination li {
    display: inline-block;
    border: 1px solid #000;
    margin: 0 2px;
}

.pagination li a {
    padding: 4px;
}

.pagination li:hover {
    background: #5973ff;
    color: #fff;
}

.pagination li.active, .pagination li.active:hover {
    background: #486aaa;
    color: #000;
}

.pagination li a:hover {
    color: currentColor;
}

/*//////////////////////////////////////////////*/
/*卡片1样式*/
.card-style1-effect a,
.card-style1-effect a:hover,
.card-style2-effect a,
.card-style2-effect a:hover {
    color: currentColor;
}

.card-style1-effect .card-content-title,
.card-style1-effect .card-content-detail,
.card-style2-effect .card-content-title,
.card-style2-effect .card-content-detail {
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;

}

.card-style1-effect .card-content-title {
    transform: translateY(100%);
    top: 50px;
    transition: all .35s;
}

.card-style2-effect .card-content-title {
    transform: translateY(50%);
    top: 50px;
}

.card-style1-effect .card-content-detail,
.card-style2-effect .card-content-detail {
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #fff;
}

.card-style1-effect .card-content-detail {
    transform: scale(0);
    transition: all .35s;
}

.card-style1-effect:hover .card-content-title {
    transform: translateY(0);
    transition: all .35s;
}

.card-style1-effect:hover .card-content-detail {
    transform: scale(1);
    transition: all .35s;
}

.card-style1-effect .card-bg-container {
    filter: brightness(80%);
    transition: all .35s;
}

.card-style1-effect:hover .card-bg-container {
    filter: brightness(100%);
    transition: all .35s;
}

.card-style1-effect:hover .card-bg-container .card-bg-img {
    background: linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
    opacity: 0.6;
}

/*/////////////////*/
/*卡片2样式*/
.card-style2-effect .card-content-detail {
    transform: scale(1.2);
    opacity: 0;
    transition: all .35s;
}

.card-style2-effect:hover .card-content-detail {
    transform: scale(1);
    opacity: 1;
    transition: all .35s;
}

.card-style2-effect:hover .card-bg-container .card-bg-img {
    background: #3085a3;
    opacity: 0.4;
}

.card-style2-effect .card-bg-container {
    transform: scale(1.2);
    transition: all .35s;
}

.card-style2-effect:hover .card-bg-container {
    transform: scale(1);
    transition: all .35s;
}

/*只有标题，内容链接的card样式*/
.card-introduce {
    /*border: 1px solid black;*/
    /*border-radius: 5px;*/
}

.card-introduce .card-title {
    background: #eee;
    display: block;
    overflow: hidden;
}

.card-introduce .card-detail {
    text-indent: 2em;
    background: rgba(238, 238, 238, 0.29);
}

.card-introduce .card-detail div {
    min-height: 48px;
}

/*//////////////////////////////////////*/

.buttons-level {
    overflow: hidden;
    line-height: 1.1em;
}

.buttons-level .item {
    margin: 6px;
    padding: 2px 10px;
    background: #eee;
    border-radius: 1em;
    box-sizing: border-box;
    border: 1px solid transparent;
}

.buttons-level .item.animate:hover {
    /*border: 1px solid red;*/
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.48);
}

.buttons-level .item a, .buttons-level .item a:hover {
    color: #fff;
}

/*//////////////////////////////////////////////////////*/
/*搜索框样式*/
.search-box {
    padding: 0 5px;
    box-sizing: border-box;
    width: 100%;
    max-width: 300px;
    display: inline-block;
}

.search-box input, .search-box button {
    /*border-radius: 2px;
    line-height: 1.5;*/
}

.search-box input {
    border-radius: 2px;
    line-height: 1.5;
    padding: 0 5px;
    width: calc(100% - 80px);
}

@media screen and (max-width: 628px) {
    .pc-search {
        display: none;
    }
}

.pc-search {
    border-right: 1px solid #eee
}

/*表格*/
.table {
    border: 1px solid red;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.table td, .table th {
    font-size: 1em;
    border: 1px solid #98bf21;
    padding: 3px 7px 2px 7px;
}

.table th {
    font-size: 1.1em;
    padding-top: 5px;
    padding-bottom: 4px;
    background-color: #A7C942;
    color: #ffffff;
}

.table tr:nth-child(2n+1) td {
    color: #000000;
    background-color: #EAF2D3;
}

/*文章部分css*/
.content-display {
    overflow: hidden;
    font-size: medium;
}

.content-display-title {
    font-size: 2em;
    margin: .4em 0;
}

.content-display-body p {
    text-indent: 2em;
    font-size: 87.5%;
    margin: 1em 0;
}

.hr {
    background: #eee;
}

.content-display-guide .pre {
    float: left;
}

.content-display-guide .next {
    float: right;
}

.content-display-category {
    margin-left: 3em;
    text-indent: -3em;
}

@media screen and (max-width: 500px) {
    .content-display-guide .pre, .content-display-guide .next {
        float: none;
        display: block;
    }
}

/*标签页面*/
.tag-container {
    margin: 20px auto;
    max-width: 600px;
}

.tag-container a, .tag-container a:hover, .tag-container a:active {
    color: currentColor;
}

.tag-container li {
    display: inline-block;
    background: red;
    margin: 4px 6px;
    border-radius: 6px;
    transition: all .2s;
    color: #fff;
}

.tag-container li:hover {
    transform: scale(1.2);
    box-shadow: 0 0 4px 1px #00000036;
    transition: all .2s;
}

.tag-container li a {
    padding: 0 10px;
    line-height: 1.8em;
    display: block;
    font-weight: bold;
}

/*//////////////////////////////*/

.links {
}